<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document对象，获取元素，节点，遍历树</title>
</head>

<body>
    <div id="box">1323123</div>
    <div>box2</div>
    <p class="text">text</p>
    <p class="text">text</p>
    <p class="text">text</p>
    <div>text1</div>


    <ul>
        <li></li>
        <li>
            <!-- 注释标签 -->
            <h2>h2</h2>
            <a href="">a标签</a>
            <p>p标签</p>
        </li>
        <li></li>
    </ul>
    <script>
        // document={
        //     getElementById("id")
        //     getElementsByTagName
        // }
        // 在ie8以下不区分大小写
        var box = document.getElementById("box");
        console.log(box);
        // 获得类数组对象
        var div1 = document.getElementsByTagName('div');
        console.log(div1);
        // querySelector querySelectorAll 是HTML3引入的api
        // 有多个标签，会选择第一个
        // 括号中的内容与css选择器相同
        // 性能方面较差，不实时
        var div2 = document.querySelector('div')
        var div3 = document.querySelector('.text')
        var div4 = document.querySelectorAll('.text');
        var div41 = document.getElementsByTagName('p')
        console.log(div2);
        console.log(div3);
        console.log(div4);
        console.log(div41);
        div4[0].remove();
        console.log(div4);
        console.log(div41);
        // ----------------------------------------------------
        // 遍历节点树
        // 节点包含元素  -元素节点=DOM元素
        // parentNode
        var a = document.getElementsByTagName('a')[0];
        console.log("a标签父节点");
        console.log(a.parentNode);
        //childNodes
        // 1. 元素节点 1
        // 2. 属性节点 2
        // 3. 文本节点 3
        // 4. 注释节点 8
        // 5. document 9
        // 6. DocumentFragment 11
        var li = document.getElementsByTagName('li')[0];
        console.log('li标签的子节点');
        console.log(li.childNodes);
        // firstChild lastChild
        console.log("firstChild + lastChild");
        console.log(li.firstChild);
        console.log(li.lastChild);
        //nextSibling下一个兄弟节点 previousSibling上一个兄弟节点
        console.log('nextSibling下一个兄弟节点 previousSibling上一个兄弟节点');
        console.log(li.nextSibling);
        console.log(li.previousSibling);
        //遍历元素节点树
        // parentElement 父元素
        console.log('parentElement 父元素');
        console.log(li.parentElement);
        //  children 子元素
        console.log('children 子元素');
        console.log(li.children);
        //childElementCount=children.length
        console.log('childElementCount');
        console.log(li.childElementCount);
        //lastElementChild firstElementChild
        console.log('lastElementChild firstElementChild');
        console.log(li.firstElementChild);
        console.log(li.lastElementChild);
        //previouElementSibling nextElementSibling
        console.log('previouElementSibling nextElementSibling');
        console.log(li.nextElementSibling);
        console.log(li.previouElementSibling);
    </script>
</body>

</html>